/* foreground colors */
.color-white
  color: $white !important
.color-titan
  color: $titan-white !important
.color-primary
  color: $brand-primary !important
.color-secondary
  color: $brand-secondary !important
.color-purple-heart
  color: $purple-heart !important
.color-mulberry
  color: $mulberry !important
.color-radical-red
  color: $radical-red !important
.color-bittersweet
  color: $bittersweet !important
.color-koromiko
  color: $koromiko !important
.color-shamrock
  color: $shamrock !important
.color-java
  color: $java !important
.color-algolia-blue
  color: $algolia-blue !important
.color-royal-blue
  color: $royal-blue !important
.color-bunting
  color: $bunting !important
.color-deep-cove
  color: $deep-cove !important

.color-port-gore
  color: $port-gore !important
.color-east-bay
  color: $east-bay !important
.color-portage
  color: $portage !important
.color-blue-bell
  color: $blue-bell !important
.color-ghost
  color: $ghost !important
.color-athens-gray
  color: $athens-gray !important
.color-logan
  color: $logan !important

.color-current
  color: currentColor !important


.fill-dark
  background-color: $primary-color !important
.fill-white
  background-color: $white !important
.fill-titan
  background-color: $titan-white !important
.fill-purple-heart
  background-color: $purple-heart !important
.fill-mulberry
  background-color: $mulberry !important
.fill-radical-red
  background-color: $radical-red !important
.fill-bittersweet
  background-color: $bittersweet !important
.fill-koromiko
  background-color: $koromiko !important
.fill-shamrock
  background-color: $shamrock !important
.fill-java
  background-color: $java !important
.fill-algolia-blue
  background-color: $algolia-blue !important
.fill-royal-blue
  background-color: $royal-blue !important
.fill-deep-cove
  background-color: $deep-cove !important
.fill-bunting
  background-color: $bunting !important
.fill-port-gore
  background-color: $port-gore !important
.fill-east-bay
  background-color: $east-bay !important
.fill-portage
  background-color: $portage !important
.fill-blue-bell
  background-color: $blue-bell !important
.fill-ghost
  background-color: $ghost !important
.fill-athens-gray
  background-color: $athens-gray !important
.fill-logan
  background-color: $logan !important


.gradient-primary,
.gradient-green
  background-image: linear-gradient(320deg, $shamrock, mix($shamrock,$java)) !important

.gradient-secondary,
.gradient-blue
  background-image: linear-gradient(256deg, $algolia-blue, $royal-blue) !important

.gradient-tertiary,
.gradient-pink
  background-image: linear-gradient(256deg, $bittersweet, $radical-red) !important

.gradient-orange
  background-image: linear-gradient(256deg, $koromiko, $bittersweet)

.gradient-purple
  background-image: linear-gradient(269deg, #8e43e6, #b84592)

.gradient-light-blue
  background-image: linear-gradient(269deg, $algolia-blue, $java)


.gradient-dark
  background-image: linear-gradient(283deg, $deep-cove, $bunting)
// Not sure why we use that one?
.color-gradient-red
  color: #E1271A
  background-image: linear-gradient(to bottom, #E39290, #E1271A, #B91E14)
